/* 是App的子组件 */
/* 
rfc: 生成函数组件 => react function Component
rcc: 生成类组件 => react class component

*/
import React, { Component } from 'react'

export default class CompTest extends Component {
  // 初始化state
  state = {
    msg: 'atguigu'
  }
  // 更新state
  handleClick = () => { // 用箭头函数解决this问题: 让this从undefined变为组件对象  => 后面全部使用函数组件
    this.setState({msg: this.state.msg + '+++'})
  }
  render() {
    // 读取state => 显示组件界面
    const {msg} = this.state
    const {count, name} = this.props
    console.log('props.name', name)
    return (
      <div style={{border: '1px solid gray'}}>
        <h3>Comp Test组件</h3>  
        <p>state.msg: {msg}</p>
        <p>props.count: {count}</p>

        <button onClick={this.handleClick}>更新msg</button>
        {/* 2. 子组件: 调用接收到prop函数 */}
        <button onClick={() => this.props.updateCount(3)}>更新父组件的state.count</button>
      </div>
    )
  }
}
